<template>
    <div class='ltStatus'>
        <el-form :inline="true"  class="demo-form-inline">
            <el-form-item label="进厅时间">
            <input-datetime :id="startDate"   :data="data"  :appid="appid"></input-datetime>
            </el-form-item>
           
            <el-form-item label="出厅时间">
            <input-datetime :id="endDate"   :data="data" :appid="appid" @changeDate="changeDate"></input-datetime>
            </el-form-item>
            <el-form-item label="守灵小时" v-if="isHour=='Y'">
            <!--my-input :id="lt_ex17"   :data="data" :appid="appid" @click.native="openKey()"></my-input-->
            <my-input :id="lt_ex17"   :data="data" :appid="appid" isreadonly="Y"></my-input>
            </el-form-item>
              <el-form-item label="守灵天数" v-if="isHour!='Y'">
             <my-input :id="lt_ex17"   :data="data"  :appid="appid" @click.native="openKey()"></my-input>
            </el-form-item>
            <!--el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item-->
        </el-form>
        <div class='ltContent'>
            <div  class='item_ul' id="box">
                <ul>
                    <li v-for="(item,index) in ltData" :key="index" >
                        <el-carousel style="height:140px;width:220px" >
                            <el-carousel-item  v-for="(image,index) in item.img.split(',')" :key="index">
                                <el-image
                                    
                                    :src="image"
                                    fit="contain" 
                                    :preview-src-list="item.img.split(',')"  ></el-image>
                            </el-carousel-item>
                        </el-carousel>
                        
                        <div class='title' style='font-weight:bold;margin-top:5px;text-align:center'>{{item.name}}</div>
                        <p  style='padding-left:5px;'>{{item.remark}}</p>
                        <div style='padding-left:5px;color:red' class='box_price'>
                            <div class='box_price_txt'>¥{{item.price}}</div>
                            <!--div class="item_btn" v-if="item.isZy!='Y'"-->
                            <div class="item_btn">
                                <div style='display:inline-block;width:40px'>
                                    <el-button type="primary" icon="el-icon-minus" size="small" circle v-show="selectItem['id'+item.szi_ex8]>0" @click="removeItem(item)"></el-button>
                                </div>
                                <div style='display:inline-block;width:30px'>
                                    <span style='display:inline-block;width:30px;text-align:center'  v-show="selectItem['id'+item.szi_ex8]>0" >{{selectItem["id"+item.szi_ex8]}}</span>
                                </div>
                                <el-button type="primary" icon="el-icon-plus" size="small" circle @click="addItem(item)"></el-button>
                            </div>
                            <!--div class="item_btn" v-else>
                                已占用
                            </div-->
                           
                        </div>
                         <div class='video'  @click="openVideo(item)">
                            点击查看视频
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <el-dialog title="查看视频" 
            append-to-body
            width="800px"
            height="70VH"
            style="left:20%;top:30%"
           
            :visible.sync="dialogVisible">
               <video-player
                v-if="dialogVisible"
                class="video-player vjs-custom-skin"
    
                ref="videoPlayer"
    
                :playsinline="true"
    
                :options="playerOptions"
    
                ></video-player>
             <div slot="footer" class="dialog-footer" style='text-align:center'>
                <el-button @click="dialogVisible = false" type="danger">关 闭</el-button>
            </div>
        </el-dialog>

        
        <el-dialog title="金额确定" 
            append-to-body
            width="300px"
            height="70VH"
            style="left:40%;top:10%"
           
            :visible.sync="dialogVisible2">
             输入金额：
             <el-input v-model="price" placeholder="请输入金额"  ref="keyboard"></el-input>
            <div style='margin-top:10px'> 
                <keyboard :option="option" @keyVal="getInputValue" ></keyboard>
            </div>
             <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="addItem2">确 定</el-button>
            </span>
        </el-dialog>
        
    </div>
</template>
<script>

import InputDatetime  from '../input/input-datetime'
import myInput  from '../input/myInput'
import Keyboard from '../input/keyboard.vue'
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
export default {
    name:"LtStatus",
    props:["data","id","exkey","extype","appid","depart"],
    components:{
        InputDatetime,
        videoPlayer,
        myInput,
        Keyboard
    },
    data(){
        return{

             option: {
                show: true,
                sourceDom: ''
            },
            price:"",
            isHour:"N",
            startDate:"",
            endDate:"",
            ltData:[],
            selectItem:{
              
            },
            date:"",
            date2:"",
            sType:"",
            dialogVisible:false,
            lt_ex17:"",
            dialogVisible2:false,
            playerOptions: {
                playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
                autoplay: true, // 如果为true,浏览器准备好时开始回放。
                muted: false, // 默认情况下将会消除任何音频。
                loop: false, // 是否视频一结束就重新开始。
                preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                language: 'zh-CN',
                aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                sources: [{
                    type: "video/mp4", 
                   /*type:"application/x-mpegURL",*/
                   src: '' // url地址
                }],
                poster: '', // 封面地址
                notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
                controlBar: {
                    timeDivider: true, // 当前时间和持续时间的分隔符
                    durationDisplay: true, // 显示持续时间
                    remainingTimeDisplay: false, // 是否显示剩余时间功能
                    fullscreenToggle: true // 是否显示全屏按钮
                }
          }
        }
    },
    created(){
        try{
            if(this.exkey.isHour){
                this.isHour=this.exkey.isHour;
            }
        }catch(e){}
        try{
            if(this.exkey.sType){
                this.sType=this.exkey.sType;
            }
        }catch(e){}
        this.startDate=this.id+".lt_dat1";
        this.endDate=this.id+".lt_dat2";
        this.lt_ex17=this.id+".lt_ex17";
        try{
            this.depart=this.data["szInfo"]["sz_depart"];
        }catch(e){}
        this.loadData();
    },
    
    methods:{
         getInputValue(val){
           
             if(val==='del'){              
                this.price=this.price.toString().substr(0,this.price.toString().length-1);
            }else{
                if(this.price==null){
                    this.price=''
                }
                this.price+=val
            }
          
        },
        loadData(){
           
            this.$post("bygex","/byg/lt/getLtStatus",{sId:this.data["szInfo"].sz_id,startDate:this.date,endDate:this.date2,sType:this.sType,depart:this.depart}).then(data=>{
                this.ltData=data;
                for(let i=0;i<this.ltData.length;i++){
                    let isMy=this.ltData[i].isMy;
                    let id=this.ltData[i].id;
                    if(isMy=='Y'){
                        this.$set(this.selectItem, "id"+id , 1); 
                       
                    }
                }
            });
        },
        openKey(){
            this.price='';
            this.dialogVisible2=true;
        },  
        addItem2(){
            let index=-1;
            for(let i=0;i<this.data["item"].length;i++){
                let szi_ex7=this.data["item"][i]["szi_ex7"];
                if(szi_ex7=="礼厅"){
                    index=i;
                }
            }
            if(index!=-1&&this.data[this.id]["lt_ex17"]){
                let szi_ex2=Number(this.data["item"][index]["szi_ex2"])
                this.$set(this.data["item"][index],"szi_ex4",this.data[this.id]["lt_ex17"]);
                this.$set(this.data["item"][index],"szi_ex5",Number(this.data[this.id]["lt_ex17"])*szi_ex2);
                this.$set(this.selectItem, "id"+this.data["item"][index]["szi_ex8"] , Number(this.data[this.id]["lt_ex17"])); 
                this.addItemRel(this.data["item"][index].szi_ex8,this.data["item"][index].szi_ex4)
            }
            this.dialogVisible2=false;
            
        },
        addItem(item){
            let num=0;
            if(this.selectItem["id"+item.szi_ex8])
                num=this.selectItem["id"+item.szi_ex8]
            if(this.data[this.id]["lt_ex17"]){
                num=Number(this.data[this.id]["lt_ex17"]);
            }else
                num=1;
            this.$set(this.selectItem, "id"+item.szi_ex8 , num); 
        
            let isOk=true;
            for(let i=0;i<this.data["item"].length;i++){
                let szi_ex8=this.data["item"][i].szi_ex8;
                if(szi_ex8==item.id){
                    isOk=false;
                }
            }
            this.$set(this.data[this.id],"lt_ex3",item.szi_ex1);
            this.$set(this.data[this.id],"lt_ex4",item.szi_ex8);
            if(isOk){
               
                if(this.data[this.id]["lt_ex17"]){
                    item.szi_ex4=Number(this.data[this.id]["lt_ex17"]);
                    let szi_ex2=Number(item.szi_ex2);
                    item.szi_ex5=Number(this.data[this.id]["lt_ex17"])*szi_ex2;
                }
                this.$set(this.data["item"],this.data["item"].length,item);
                this.addItemRel(item.szi_ex8,item.szi_ex4)
            }
            //this.$emit("addItem",JSON.stringify(item))
            
        },
        addItemRel(id,szi_ex4){
             this.$post("bygex","/byg/funeral/getSfItemDp2",{sf_id:id}).then(data=>{
                
                 for(let i=0;i<data.length;i++){
                     let item=data[i];
                     let index=-1;
                     for(let j=0;j<this.data["item"].length;j++){
                         if(this.data["item"][j]["szi_ex1"]==item.szi_ex1){
                             index=j;
                         }
                     }

                     if(index>=0){
                         let szi_ex2=Number(this.data["item"][index]["szi_ex2"]);
                         this.$set(this.data["item"][index],"szi_ex4",szi_ex4);
                         this.$set(this.data["item"][index],"szi_ex5",szi_ex2*Number(szi_ex4));
                     }else{
                         let szi_ex2=Number(item.szi_ex2);
                         item.szi_ex4=szi_ex4;
                         item.szi_ex5=szi_ex2*Number(szi_ex4);
                         this.$set(this.data["item"],this.data["item"].length,item);
                     }
                 }
             });
        },
        removeRel(id){
            this.$post("bygex","/byg/funeral/getSfItemDp2",{sf_id:id}).then(data=>{
                
                 for(let i=0;i<data.length;i++){
                     let item=data[i];
                     let index=-1;
                     for(let j=0;j<this.data["item"].length;j++){
                         if(this.data["item"][j]["szi_ex1"]==item.szi_ex1){
                             index=j;
                         }
                     }

                     if(index>=0){
                          this.$delete(this.data["item"],index)
                     }
                 }
             });
        },
        removeItem(item){
            let num=0;
            if(this.selectItem["id"+item.szi_ex8])
                num=this.selectItem["id"+item.szi_ex8]
            num--;
            num=0;
            if(num<0)
                num=0;
            this.$set(this.selectItem, "id"+item.szi_ex8 , num); 

            let data={};
            data.id=item.szi_ex8;
            data.sf_ex24=item.sf_ex24;
            data.num=num;

            let index=-1;
            for(let i=0;i<this.data["item"].length;i++){
                if(this.data["item"][i].szi_ex8==item.id){
                    index=i;
                }
            }
            if(index!=-1){
                this.$delete(this.data["item"],index)
                this.removeRel(item.szi_ex8)
            }
          //  this.$emit("removeItem",JSON.stringify(data))
           // this.changeAmt();
        },
        openVideo(item){
            let url="http://8.136.193.200"+item.sf_ex57
            this.playerOptions.sources[0].src=url;
            this.dialogVisible=true;
            
        },
        changeDate(data){
            if(this.isHour=='Y'){
                let startDate=this.data[this.id]["lt_dat1"];
                let endDate=data;
                var stime =new Date(startDate).getTime();
                var etime = new Date(endDate).getTime();
                var usedTime = etime - stime;  //两个时间戳相差的毫秒数
                let hours=Math.floor(usedTime/(3600*1000));
               // alert(hours)
                this.$set(this.data[this.id],"lt_ex17",hours)
            }
        }
    },
    watch:{
       
        price:{
            handler: function (newVal) {
                this.$set(this.data[this.id],"lt_ex17",newVal);
                if(this.data[this.id]["lt_dat1"]&&newVal){
                    let startDate=this.data[this.id]["lt_dat1"];
                    if(this.isHour=='Y'){

                        let date=new Date(startDate);
                        date.setHours(date.getHours() + Number(newVal));
                        var year = date.getFullYear();//当前时间的年份减去一年
                        var month = date.getMonth()+1;//时间的月份获取
                        var day = date.getDate();//时间的日，获取
                        var hour=date.getHours();
                        var sec=date.getMinutes();
                        if(month<10){
                            month="0"+month;
                        }
                        if(day<10){
                            day="0"+day;
                        }
                         if(hour<10){
                            hour="0"+hour;
                        }
                         if(sec<10){
                            sec="0"+sec;
                        }
                        var time = year+'-'+month+'-'+day+" "+hour+":"+sec;
                        this.$set(this.data[this.id],"lt_dat2",time)
                    }
                }
            }
        },
        data:{
            handler: function (newVal) {
                try{
                    this.sz_depart=this.data["szInfo"]["sz_depart"];
                }catch(e){}
                let date=this.data[this.id]["lt_dat1"]; 
                let date2=this.data[this.id]["lt_dat2"];
                if(date!=this.date||date2!=this.date2){
                    this.date=date;
                    this.date2=date2;
                    this.loadData();
                }
            },      
            deep: true    //深度监听
        }
    }
}
</script>
<style scoped>
    .ltStatus{
        width:100%;
        height:80VH;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding:10px;
    }
    .ltContent{
        flex:1;
        overflow: auto;
    }
    #box ul{
		display: flex;
		flex-wrap: wrap;
	}
	#box li{
		padding: 3px;
		list-style: none;
		margin-right: 15px;
		border: 1px solid #eee;
        width:220px;
        border-radius: 15px;
	}
	#box img{
		width: 200px;
		height: 150px;
	}
    .item_ul>>>.el-carousel__container{
        height: 140px;
    }
    .box_price{
        display:flex;
        flex-direction: row;
    }
    .box_price_txt{
        flex:1;
        line-height:30px;
        font-weight: bold;
    }
    .video{
        font-size:18px;
        cursor: pointer;
    }
</style>